<template>
  <div class="personal">
    <div class="p-head">
      <img class="p-bg" src="../assets/img/p-head.png" alt="">
      <div class="head-div">
        <div class="head">
          <img src="../assets/img/logo.png" alt="">
        </div>
        <div>{{name}}</div>
      </div>
    </div>
    <ul class="list">
      <router-link tag="li" to="/change-message"> 
        <div class="l-img change">
          <img src="../assets/img/personal.png" alt="">
        </div>
        <div>修改资料</div>
      </router-link>
      <router-link tag="li" to="change-password">
        <div class="l-img change">
          <img src="../assets/img/lock.png" alt="">
        </div>
        <div>修改密码</div>
      </router-link>
      <router-link tag="li" to="/list">
        <div class="l-img change">
          <img src="../assets/img/word.png" alt="">
        </div>
        <div>选择词库</div>
      </router-link>
      <li @click="remmberWord">
        <div class="l-img change">
          <img src="../assets/img/rem.png" alt="">
        </div>
        <div>背单词</div>
      </li>
    </ul>
    <div class="logout" @click="logout">退出</div>
  </div>
</template>
<script>
import storage from 'storage'
import io from 'api/io'
export default {
  name:'personal',
  data () {
    return {
      name:storage.getCurrentUserInfo()&&JSON.parse(storage.getCurrentUserInfo()).username,
      user:{}
    }
  },
  created () {
    console.log(JSON.parse(storage.getCurrentUserInfo()))
    this.getUserStatistics()
  },
  methods: {
        async getUserStatistics(){
            let {data}=await io.post(io.getUserStatistics)
            if(data.success){
                this.user=data.data
            }
        },
        remmberWord(){
          if(this.user&&this.user.wordRepoId){
            this.$router.push({path:'/level',query:{id:this.user.wordRepoId}})
          }else{
            this.$router.push('/list')
          }
        },
        logout(){
          MessageBox.confirm('确定退出?').then(action => {
                storage.removeAccessToken()
                storage.removeCurrentUserInfo()            
                this.$router.push('/login')

});
        }
  }
}
</script>

<style lang="stylus">
.personal
  color #333
  position relative
  background #f4fff4
  min-height 100%
  .p-bg
    width 100%
    height auto
  .head-div
    position absolute
    top 40px
    display flex
    align-items center
    color white
    font-size 19px
    .head
      width 60px
      height 60px
      border-radius 50%
      overflow hidden
      margin 0 15px 0 20px
  .list
    padding 0
    margin 10px 0 0 0
    li
      height 55px
      width 100%
      display flex
      align-items center
      border-bottom 1px solid #eeeeee
      padding-left 20px
      background white
      font-size 16px
      &:last-child
        margin-top 10px
      .l-img
        width 20px
        height 18px
        margin-right 10px
        img 
          width 15px
          height auto
  .logout
    width 60%
    margin-left 20%
    margin-top 40px
    height 42px
    background-image linear-gradient(180deg, #99f164 0%, #77de6b 37%, #54cb72 74%,#4eb667 100%)
    border-radius 20px
    display flex
    justify-content center
    align-items center
    color #fefefe
    font-size 18px

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
  .logout
    width 40% !important 
    margin-left 30% !important 
</style>


